<template>
	<view class="container">
		<!-- <view class="cu-card dynamic" style="position: relative; left: 3vw; width: 94vw;">
			<view class="" style="position:relative;background-color:none; color:#fff; width: 88vw; margin-left:3vw;">
				<view class="info_bg"></view>
				<view class="radius">
					<view class="text-center margin-top-lg" style="padding: 10px;">
						<view class="action">我的余额 ( 元 )</view>
					</view>
					<view class="padding-lr text-center">
						<  <text class="text-price"></text> 
						<text class="text-xxlx"></text>
					</view>
				</view>
			  <view class="flex padding">
					<view class="text-center flex-sub bg-inv padding-sm margin-xs radius" @click="toUrl('/pages/wallet/cash')">提现</view>
					<view class="text-center flex-sub bg-gradual-orange padding-sm margin-xs radius" @click="toUrl('/pages/wallet/recharge')">充值</view>
				</view>  
			</view>
		</view> -->
		<view class="mory_newbox">
			<view class="mory_ye">
				<view class="icon"></view>
				<view class="nummer">￥{{ userinfo.money }}</view>
				<view class="action">我的余额 ( 元 )</view>
			</view>
			<view class="wal-bg">
				<view class="wal_list">
					<view class="wal_item">
						<view class="wal_money">{{userinfo.todayincome}}</view>
						<view class="wal_tit">今日收益</view>
					</view>
					<view class="wal_item">
						<view class="wal_money">{{userinfo.yesterdayincome}}</view>
						<view class="wal_tit">昨日收益</view>
					</view>
					<view class="wal_item">
						<view class="wal_money">{{userinfo.income}}</view>
						<view class="wal_tit">总收益</view>
					</view>
					<view class="wal_item">
						<view class="wal_money">{{userinfo.allcash}}</view>
						<view class="wal_tit">总提现</view>
					</view>
					<view class="wal_item">
						<view class="wal_money">{{userinfo.allrecharge}}</view>
						<view class="wal_tit">总充值</view>
					</view>
					<view class="wal_item">
						<view class="wal_money">{{userinfo.redbag}}</view>
						<view class="wal_tit">红包余额</view>
					</view>
					
				</view>
			</view>
		</view>
		<view class="wal_det">
			<view class="info_bg"></view>
			<view class="det_list">
				<view class="det_item">
					<view class="det_tit">账户明细</view>
					<view class="det_see" @click="accountBill">去查看</view>
					<view class="cuIcon-right" @click="accountBill"></view>
				</view>
				<view class="det_item">
					<view class="det_tit">充值记录</view>
					<view class="det_see" @click="navToUrl('/pages/wallet/rechargelog')">去查看</view>
					<view class="cuIcon-right" @click="navToUrl('/pages/wallet/rechargelog')"></view>
				</view>
				<view class="det_item">
					<view class="det_tit">提现记录</view>
					<view class="det_see" @click="navToUrl('/pages/wallet/cashlog')">去查看</view>
					<view class="cuIcon-right" @click="navToUrl('/pages/wallet/cashlog')"></view>
				</view>
			</view>
		</view>
		
		<view class="btn_list">
			<view class="btn recharge" @click="navToUrl('/pages/wallet/recharge')">充 值</view>
			<view class="btn draw" @click="navToUrl('/pages/wallet/cash')">提 现</view>
		</view>
		 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo:[]
			}
		},
		onLoad: function (option) {
			this.helper.checkLogin();
			this.getData();
		},
		methods: {
			getData:function(){
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['username='+info.username,'token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getUserInfo",
					timestamp:timestamp,
					data:{username:info.username,token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.userinfo = res.data.data.userinfo;
					setTimeout(() => {
						uni.hideLoading();
					}, 30021);
				})
			},
			//链接
			navToUrl: function(url) {
				return uni.navigateTo({
					url: url
				});
			},
			resetpwd: function(){
				this.navToUrl('/pages/user/repasswd')
			},
			accountBill: function(){
				this.navToUrl('/pages/wallet/bill')
			}
		}
	}
</script>

<style lang="scss">
	page{
		// background-image: url('@/static/images/person/center-bg.png');
		// background-size: 100% 100%;
		// background-repeat: no-repeat;
		// min-height: 200vw;
		background-color: #ddeafd;
		height:100%;
	}
	.mory_newbox{
		background: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin: 30rpx ;
		.mory_ye{
			border-bottom: 1px solid #b5b5b5;
			padding-bottom: 60rpx;
			.icon{
				width: 107rpx;
				height: 127rpx;
				background-image: url('');
				background-position: center;
				background-repeat: no-repeat;
				background-size: 100%;
				margin: 0 auto;
			}
			.nummer{
				font-size: 40rpx;
				font-weight: bold;
				color: #4188ff;
				text-align: center;
				margin: 20rpx 0;
			}
			.action{
				text-align: center;
				color: #353535;
				font-size: 26rpx;
			}
		}
	}
	.wal-bg{
		
		position: relative;
		
		background-color: #fff; 
		height: 50vw;
		 
	}
	.info_bg{
		
		 
		border-radius:10px;
	}
	.det_list{
		width: 100%;
		height: 48vw;
		position: absolute;
		top: 0;
		left: 0;
	}
	.action{
		font-size: 16px;
	}
	.text-xxlx{
		color:#7AE6FF;
		font-weight: bold;
	}
	
	.wal_list{
		width: 100%;
		.wal_item{
			width: 33.33%;
			height: 20vw;
			color:#4188ff;
			padding: 10px 0;
			text-align: center;
			font-size: 18px;
			float:left;
			
			.wal_money{
				font-size: 20px;
				font-weight: bold;
				line-height: 30px;
			}
			.wal_tit{
				font-size: 15px;
				line-height: 24px;
				color:#CCC;
			}
		}
	}
	
	.wal_det{
		position: relative;
		width: 92vw;
		height: 35vw;
		margin: 4vw 4vw;
		background: #fff;
		border-radius: 10rpx;
		.det_item{
			height: 12vw;
			color: #353535;
			font-size: 16px;
			display: flex;
			margin: 0 4vw;
			border-bottom: 0.5px solid #EEE;
			
			.det_tit{
				width: 70vw;
				line-height: 12vw;
				font-size: 15px;
			}
			.det_see{
				width: 14vw;
				line-height: 12vw;
				font-size: 14px;
			}
			.cuIcon-right{
				line-height: 11vw;
			}
		}
		.det_item:last-child{
			border: none;
		}
	}
	
	.btn_list{ 
		display: flex; 
		margin: 0 80rpx;
		justify-content: space-between;
		position: relative;
		z-index: 3;
		.btn{
			width: 280rpx;
			height: 9vw;
			line-height: 9vw;
			text-align: center;
			color:#fff;
			font-size: 16px;
			 
			border-radius: 10rpx;
		}
		.draw{
			color:#fff;
			background: #b9b9b9;
		}
		.recharge{
			background: linear-gradient( 180deg, #50A7FF 0%, #3267FF 100%);
		}
	}
</style>
